:focus {
  outline: none;
}
body{
  background: #fff;
}
a{
  cursor: pointer;
}
#header{
    height: 3.8em;
    line-height: 3.8em;
    background: #f9f9f9;
    border-bottom: 1px #d4d4d4 solid;
}
#header .left,
#header .right{
  min-width: 3.8em;
  height: 3.8em;
}
#header .left a.btn,
#header .right a.btn{
  display: block;
  text-align: center;
    -webkit-transition: background .2s;
    transition: background .2s;
}
#header .left a.btn:active, 
#header .right a.btn:active{
    background-color: rgba(238,238,238,1);
}
#header .left i,
#header .right i{
  position: relative;
  font-size: 1.5em;
  color: #848484;
}
#header .middle{
  text-align: center;
}

#container,
#content{
    background-color: #f9f9f9;
}

.badge {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  line-height: 1.5em;
  text-align: center;
  font-style: normal;
  font-size: .7em;
  color: #fff;
  background: #ff3b30;
  z-index: 1;
}

.button{
  font-size: 1em;
  background: #3f99f2;
  border: none;
  color: #fff;
}
.button.active{
    opacity: .7;
}
.button.disabled{
    background: #ccc;
}

#mask{
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}
.custom-dialog{
    position: fixed;
    z-index: 13;
    width: 80%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #FAFAFC;
    border-radius: 3px;
  -webkit-animation: customDialog .3s 1;
  animation: customDialog .3s 1;
}
.custom-dialog .title,
.custom-dialog .content,
.custom-dialog .btns{
  margin: 1em;
}
.custom-dialog .title{
  font-weight: 400;
  font-size: 1.3em;
}
.custom-dialog .content{
  padding: 0 1em;
  line-height: 1.5em;
  color: #888;
}
.custom-dialog .btns{
    margin-bottom: .5em;
    padding: .5em 0 0;
    border-top: 1px solid #D5D5D6;
    text-align: center;
}
.custom-dialog .btns button{
  padding: .5em 1em;
  font-size: 1em;
  border: none;
  background: none;
    -webkit-transition: background .2s;
    transition: background .2s;
}
.custom-dialog .btns button:active{
    background-color: rgba(238,238,238,1);
}
#toast-mask{
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.custom-toast{
    position: fixed;
    z-index: 3;
    width: 7.6em;
    min-height: 7.6em;
    top: 50%;
    left: 50%;
    margin-top: -3.8em;
    margin-left: -3.8em;
    background: rgba(40, 40, 40, 0.75);
    text-align: center;
    border-radius: .3em;
    color: #FFFFFF;
}
#toast-loading .icon{
    height: 4em;
    padding-top: 1em;
}
#toast-loading .icon img{
    width: 2.5em;
    height: 2.5em;
}
#toast-tip{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.8em;
  line-height: 3.8em;
  border-bottom: 1px #007aff solid;
  color: #fff;
  background: #007aff;
  text-align: center;
  -webkit-animation: toastTip .3s 1;
  animation: toastTip .3s 1;
}
#toast-tip.error{
  border-color: red;
  background: red;
}











@keyframes toastTip{
from {top: -4em;}
to {top: 0;}
}

@-webkit-keyframes toastTip{
from {top: -4em;}
to {top: 0;}
}


@keyframes customDialog{
from {
  opacity: .5;
  transform:scale(1.3,1.3) translate(-40%, -40%);
}
to {
  opacity: 1;
  transform:scale(1,1) translate(-50%, -50%);
}
}

@-webkit-keyframes customDialog{
from {
  opacity: .5;
  -webkit-transform:scale(1.3,1.3) translate(-40%, -40%);
}
to {
  opacity: 1;
  -webkit-transform:scale(1,1) translate(-50%, -50%);
}
}
